<template>
	<div class="player-box" :style="{ width: width, height: height }">
		<div :id="id"></div>
	</div>
</template>

<script>
	export default {
		name: "Player",
		props: {
			//页面传递的地址
			src: {
				type: String,
				default: "",
			},
			openAudio: {
				type: Boolean,
				default: false,
			},
			//页面传递id
			id: {
				type: String,
				default: "paer",
			},
			width: {
				type: [Number, String],
				default: "100%",
			},
			height: {
				type: [Number, String],
				default: "100%",
			},
		},
		data() {
			return {
				player: null,
				videoMonitorPath: null,
				timers: null,
				hlsDownAddress: null,
			};
		},
		mounted() {
			let _this = this;
			this.hlsDownAddress = this.src;
			this.timers = setTimeout(() => {
				_this.getVideo2();
			}, 100);
		},
		beforeUnmount() {
			this.timers = null;
			if (this.player) this.player.destroy(); // 关闭控件
			this.player = null;
			this.hlsDownAddress = null;
		},
		methods: {
			getVideo2() {
				this.player = new window.WasmPlayer(null, this.id, this.callbackfun, {
					BigPlay: true,
					HideKbs: true,
					openAudio:true,
				});
				this.player.play(this.hlsDownAddress, 1);
			},

			callbackfun() {
				//console.log('callbackfun', e);
			}
		},
	};
</script>

<style>
	.player-content span {
		display: none !important;
	}
</style>
